@charset "UTF-8";
/*
 * author: 小小游 --- allen
 * date: 2019.09.30
 * lastUpdateDate: 2019.10.30
 * description: sass是一种预编译CSS的快捷工具，能迅速提高我们的开发效率，节省时间和成本等等.
 */
@import "./reset";

@media screen and (max-width: 1921px) {
	body,
	html {
		height: 100%;
		overflow: hidden;
	}
	
	body {
		background-color: #fff;
		font-family: "Microsoft YaHei";
		position: relative;
	}
	
	/** 通用的样式 start */
	.comWidth {
		width: 1200px;
		margin: 0 auto;
	}
	
	/** 头部右上方酷炫的下拉菜单效果 start */
	.T3D {
		-ms-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}
	
	.P800 {
		-ms-perspective: 800px;
		-moz-perspective: 800px;
		-webkit-perspective: 800px;
		-o-perspective: 800px;
		perspective: 800px;
	}
	/** 头部右上方酷炫的下拉菜单效果 end */
	/** 通用的样式 end */
	
	#app {
		height: 100%;
		position: relative;
		z-index: 1;
		/** 头部通用样式 start */
		.commonHeader {
			position: fixed;
			top: 0;
			z-index: 1001;
			width: 100%;
			height: 86px;
			background-color: rgba(0, 0, 0, .5);
			.centerCont {
				/** logo区域 start */
				.logo {
					padding-top: 18px;
					box-sizing: border-box;
					-webkit-box-sizing: border-box;
					h1 {
						a {
							display: block;
							img {
								width: 148px;
								height: 50px;
							}
						}
					}
				}
				/** logo区域 end */
				
				/** 头部导航菜单区域 start */
				.nav {
					position: relative;
					z-index: 2;
					margin-left: 132px;
					ul {
						li {
							float: left;
							height: 86px;
							position: relative;
							z-index: 2;
							letter-spacing: 1px;
							margin: 0 20px;
							a {
								float: left;
								font-weight: normal;
								font-size: 18px;
								line-height: 86px;
								color: #ededed;
								.up {
									position: absolute;
									left: 0;
									top: 0;
									z-index: 2;
									color: #f1c70a;
									width: 0%;
									overflow: hidden;
									transition: .5s width;
									-webkit-transition: .5s width;
									/** 强制文本不换行 start */
									white-space: nowrap;
									/** 强制文本不换行 end */
								}
							}
							
							/** css3的下划线向两边展开的效果 */
							/** &:after {
								content: "";
								width: 0;
								height: 4px;
								background-color: #f1c70a;
								position: absolute;
								top: 95%;
								left: 50%;
								z-index: 2;
								transition: .5s all;
								-webkit-transition: .5s all;
							}
							 
							&.active:after,
							&:hover:after {
								left: 0%;
								width: 100%;
							} */
						}
					}
					
					.line {
						/** 动态设置宽度 start */
						/** width: 20px; */
						/** 动态设置宽度 end */
						height: 4px;
						background-color: #f1c70a;
						position: absolute;
						left: 0;
						bottom: 0;
						z-index: 2;
						transition: .5s left;
						-webkit-transition: .5s left;
					}
				}
				/** 头部导航菜单区域 end */
			}
		}
		/** 头部通用样式 end */
		/** 核心内容区域 start */
		.coreCont {
			width: 100%;
			position: relative;
			overflow: hidden;
			.screList {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 0;
				width: 100%;
				transition: .5s top;
				-webkit-transition: .5s top;
				.commonS {
					width: 100%;
					height: 100%;
					position: relative;
					&:nth-of-type(1) {
						/** 这个是大图的轮播图区域 start */
						/** 这个是大图的轮播图区域 end */
					}
					
					&:nth-of-type(2) {
						background: url(../images/bg_culture.jpg) no-repeat center top;
						background-size: 100% 100%;
						-webkit-background-size: 100% 100%;
					}
					
					&:nth-of-type(3) {
						background: url(../images/bg_pos.jpg) no-repeat center top;
						background-size: 100% 100%;
						-webkit-background-size: 100% 100%;
					}
					
					&:nth-of-type(4) {
						background: url(../images/bg_about.jpg) no-repeat center top;
						background-size: 100% 100%;
						-webkit-background-size: 100% 100%;
					}
					
					&:nth-of-type(5) {
						background: url(../images/bg_contact.jpg) no-repeat center top;
						background-size: 100% 100%;
						-webkit-background-size: 100% 100%;
					}
				}
				
				/** 第一屏 - 首页 start */
				.oneScreen {
					/** 第一屏banner大图 start */
					.myBPic {
						.myBanner {
							ul {
								position: absolute;
								left: 0;
								top: -100px;
								z-index: 2;
								transition: .6s all;
								-webkit-transition: .6s all;
								filter: alpha( opacity = 0 );
								opacity: 0;
								li {
									float: left;
									&:nth-of-type(1) {
										background: url(../images/banner1.jpg) no-repeat center top;
										background-size: 100% 100%;
										-webkit-background-size: 100% 100%;
									}
									
									&:nth-of-type(2) {
										background: url(../images/banner2.jpg) no-repeat center top;
										background-size: 100% 100%;
										-webkit-background-size: 100% 100%;
									}
									
									&:nth-of-type(3) {
										background: url(../images/banner3.jpg) no-repeat center top;
										background-size: 100% 100%;
										-webkit-background-size: 100% 100%;
									}
									
									&:nth-of-type(4) {
										background: url(../images/banner4.jpg) no-repeat center top;
										background-size: 100% 100%;
										-webkit-background-size: 100% 100%;
									}
								}
							}
						}
							
						.myBtn {
							a {
								position: absolute;
								top: 50%;
								z-index: 1009;
								width: 66px;
								height: 66px;
								background-size: 66px 400px;
								text-indent: -999999em;
								filter: alpha( opacity = 0 );
								opacity: 0;
								margin-top: -33px;
								&:nth-of-type(1) {
									left: 33px;
									background: url(../images/icon_ico.png) no-repeat 0 -80px;
								}
								
								&:nth-of-type(1):hover {
									background: url(../images/icon_ico.png) no-repeat 0 -150px;
								}
								
								&:nth-of-type(2) {
									right: 33px;
									background: url(../images/icon_ico.png) no-repeat 0 -10px;
								}
								
								&:nth-of-type(2):hover {
									background: url(../images/icon_ico.png) no-repeat 0 -223px;
								}
							}
						}
						
						/** .mark {
							cursor: pointer;
							div {
								position: absolute;
								left: 0;
								top: 0;
								z-index: 1000;
								width: 50%;
								height: 100%;
								filter: alpha( opacity = 0 );
								opacity: 0;
							}
							.mark_left {
								background-color: #f00;
							}
							
							.mark_right {
								left: 50%;
								background-color: #0000ED;
							}
						} */
						
						.myNav {
							position: absolute;
							left: 50%;
							bottom: 0;
							z-index: 3;
							transform: translateX(-50%);
							-webkit-transform: translateX(-50%);
							filter: alpha( opacity = 0 );
							opacity: 0;
							ul {
								li {
									float: left;
									width: 56px;
									height: 6px;
									background-color: #7d7d7d;
									margin-right: 20px;
									cursor: pointer;
									a {
										float: left;
										width: 0px;
										height: 100%;
										background-color: #f1c70a;
									}
									
									&:last-of-type {
										margin-right: 0;
									}
								}
							}
						}
					}
					/** 第一屏banner大图 end */
				}
				/** 第一屏 - 首页 end */
				/** 第二屏 - 公司文化 start */
				.twoScreen {
					width: 100%;
					overflow: hidden;
					text-align: center;
					.twoCenter {
						.generalizations {
							.title {
								position: absolute;
								left: 50%;
								top: 100%;
								filter: alpha( opacity = 0 );
								opacity: 0;
								transition: .6s top;
								-webkit-transition: .6s top;
								transform: translateX(-50%);
								-webkit-transform: translateX(-50%);
								h1 {
									font-weight: bold;
									font-size: 56px;
									line-height: 88px;
									font-family: "Microsoft YaHei";
									color: #ee881d;
								}
								
								span {
									font-weight: normal;
									font-size: 24px;
									font-family: "Microsoft YaHei";
									color: #868686;
								}
							}
							
							.introduction {
								padding: 0 40px;
								box-sizing: border-box;
								-webkit-box-sizing: border-box;
								p {
									width: 1120px;
									position: absolute;
									top: -100%;
									filter: alpha( opacity = 0 );
									opacity: 0;
									transition: .6s top;
									-webkit-transition: .6s top;
									font-weight: normal;
									font-size: 24px;
									line-height: 40px;
									font-family: "Microsoft YaHei";
									color: #000;
								}
							}
							
							.concept {
								width: 100%;
								text-align: left;
								position: relative;
								.commonShow {
									&:first-of-type {
										h2 {
											position: absolute;
											left: 100%;
											top: 400px;
											filter: alpha( opacity = 0 );
											opacity: 0;
											transition: .6s left;
											-webkit-transition: .6s left;
										}
										
										p {
											position: absolute;
											left: -100%;
											top: 450px;
											width: 800px;
											filter: alpha( opacity = 100 );
											opacity: 100;
											transition: .6s left;
											-webkit-transition: .6s left;
										}
									}
									
									&:last-of-type {
										h2 {
											position: absolute;
											left: -100%;
											top: 520px;
											filter: alpha( opacity = 0 );
											opacity: 0;
											transition: .6s left;
											-webkit-transition: .6s left;
										}
										
										p {
											position: absolute;
											left: 400px;
											top: 570px;
											width: 800px;
											filter: alpha( opacity = 0 );
											opacity: 0;
											transition: .6s left;
											-webkit-transition: .6s left;
										}
									}
									
									h2 {
										font-weight: normal;
										font-size: 30px;
										line-height: 50px;
										font-family: "Microsoft YaHei";
										color: #ef881d;
									}
									
									p {
										font-weight: normal;
										font-size: 20px;
										line-height: 30px;
										font-family: "Microsoft YaHei";
										color: #000;
									}
								}
							}
						}
					}
				}
				/** 第二屏 - 公司文化 end */
				/** 第三屏 - 求职招聘 start */
				.threeScreen {
					width: 100%;
					overflow: hidden;
					zoom: 1;
					.threeCenter {
						position: absolute;
						left: 50%;
						top: -100%;
						z-index: 1;
						width: 1000px;
						height: 560px;
						background-color: rgba(0, 0, 0, .8);
						border-radius: 10px;
						margin: 0 auto;
						transition: .6s all;
						-webkit-transition: .6s all;
						filter: alpha( opacity = 0 );
						opacity: 0;
						transform: translateX(-50%);
						-webkit-transform: translateX(-50%);
						.joinUs {
							height: 560px;
							padding: 47px 15px;
							box-sizing: border-box;
							-webkit-box-sizing: border-box;
							position: relative;
							overflow: hidden;
							.myPosBtn {
								position: absolute;
								left: 100%;
								top: 47px;
								z-index: 3;
								float: left;
								width: 150px;
								height: 466px;
								margin-right: 15px;
								transition: .6s left;
								-webkit-transition: .6s left;
								filter: alpha( opacity = 0 );
								opacity: 0;
								a {
									display: block;
									width: 130px;
									height: 40px;
									border-radius: 30px;
									font-weight: normal;
									font-size: 18px;
									line-height: 40px;
									font-family: "Microsoft YaHei";
									color: #fff;
									text-align: center;
									position: relative;
									z-index: 2;
									&:last-of-type {
										top: 20px;
									}
								}
								
								span {
									position: absolute;
									left: 0;
									top: 0;
									z-index: 1;
									display: block;
									width: 130px;
									height: 40px;
									text-indent: -999999em;
									background-color: #595a5c;
									border-radius: 30px;
									&::after {
										content: '';
										position: absolute;
										right: -26px;
										top: 14px;
										width: 13px;
										height: 13px;
										border-radius: 50%;
										background-color: #fff;
									}
								}
							}
							
							.dividingLine {
								float: left;
								position: absolute;
								left: 164px;
								top: 100%;
								z-index: 2;
								width: 1px;
								height: 466px;
								background: url(../images/line.png) no-repeat right center;
								background-size: 1px 466px;
								text-indent: -999999em;
								filter: alpha( opacity = 0 );
								opacity: 0;
								transition: .6s top;
								-webkit-transition: .6s top;
							}
							
							.myPosCont {
								position: absolute;
								left: -100%;
								z-index: 3;
								float: left;
								width: 802px;
								filter: alpha( opacity = 0 );
								opacity: 0;
								transition: .6s left;
								-webkit-transition: .6s left;
								.commonC {
									display: none;
									position: relative;
									z-index: 2;
									filter: alpha( opacity = 0 );
									opacity: 0;
									/** 自定义滚动条 start */
									#scrollBar {
										position: absolute;
										right: -18px;
										top: 0;
										z-index: 22;
										width: 8px;
										height: 100%;
										border-radius: 6px;
										background-color: transparent;
										#bar {
											position: absolute;
											top: 0;
											left: 0;
											z-index: 3;
											width: 8px;
											height: 72px;
											border-radius: 6px;
											background-color: #fff;
											cursor: pointer;
										}
									}
									/** 自定义滚动条 end */
									.comPCont {
										height: 466px;
										overflow: hidden;
										position: relative;
										.companyPos {
											position: absolute;
											left: 0;
											top: -2px;
											z-index: 1;
											width: 802px;
											> li {
												margin-bottom: 10px;
												padding: 0 20px;
												box-sizing: border-box;
												-webkit-box-sizing: border-box;
												h1 {
													font-weight: normal;
													font-size: 20px;
													font-family: "Microsoft YaHei";
													color: #f1c70a;
													margin-bottom: 8px;
												}
												
												.myPosDesc {
													width: 936px;
													.item {
														float: left;
														margin-right: 170px;
														label,
														strong {
															font-weight: normal;
															font-size: 16px;
															line-height: 30px;
															font-family: "Microsoft YaHei";
															color: #fff;
														}
														
														&:nth-of-type(4) {
															margin-right: 186px;
														}
													}
												}
												/** a {
													padding: 0 22px 0 0;
													box-sizing: border-box;
													-webkit-box-sizing: border-box;
													font-weight: normal;
													font-size: 16px;
													line-height: 36px;
													color: #f1c70a;
													font-family: "Microsoft YaHei";
													width: 16px;
													height: 8px;
													background: url(../images/arrow_down.png) no-repeat right center;
													background-size: 16px 8px;
													
													&.up {
														background-image: url(../images/arrow_up.png);
														background-size: 16px 8px;
													}
												} */
												
												.jobRequirements {
													h2 {
														font-weight: normal;
														font-size: 18px;
														line-height: 32px;
														font-family: "Microsoft YaHei";
														color: #fff;
													}
													
													ul {
														li {
															font-weight: normal;
															font-size: 16px;
															line-height: 30px;
															font-family: "Microsoft YaHei";
															color: #fff;
														}
													}
												}
												/** 局部样式调整 start */
												&:nth-of-type(5) {
													.myPosDesc {
														.item:nth-of-type(2) {
															margin-right: 162px;
														}
														
														.item:nth-of-type(4) {
															margin-right: 154px;
														}
													}
												}
												
												&:nth-of-type(1) {
													padding-top: 0;
												}
												/** 局部样式调整 end */
											}
										}
									}
								}
								/** 求职招聘分页器版块 start */
								/** .page {
									position: absolute;
									left: 50%;
									bottom: -48px;
									z-index: 99;
									text-align: center;
									width: 100%;
									transform: translateX(-50%);
									-webkit-transform: translateX(-50%);
									a {
										display: inline-block;
										width: 32px;
										height: 32px;
										background-color: #a09fa0;
										border-radius: 50%;
										font-weight: normal;
										font-size: 16px;
										line-height: 32px;
										color: #000;
										margin-right: 15px;
										&:last-of-type {
											margin-right: 0;
										}
										
										&.active {
											background-color: #e7bf0b;
											color: #fff;
										}
									}
								} */
								/** 求职招聘分页器版块 end */
								.companyDesc {
									padding: 0 0 0 10px;
									box-sizing: border-box;
									-webkit-box-sizing: border-box;
									h1 {
										font-weight: normal;
										font-size: 24px;
										line-height: 32px;
										font-family: "Microsoft YaHei";
										color: #fff;
									}
									h2 {
										font-weight: normal;
										font-size: 20px;
										line-height: 40px;
										font-family: "Microsoft YaHei";
										color: #fff;
									}
									
									.welfare {
										ul {
											li {
												font-weight: normal;
												font-size: 16px;
												line-height: 30px;
												font-family: "Microsoft YaHei";
												color: #fff;
											}
										}
									}
									
									.address {
										margin-top: 30px;
										ol {
											li {
												font-weight: normal;
												font-size: 16px;
												line-height: 30px;
												font-family: "Microsoft YaHei";
												color: #fff;
											}
										}
									}
								}
							}
						}
					}
				}
				/** 第三屏 - 求职招聘 end */
				/** 第四屏 - 关于我们 start */
				.fourScreen {
					.item {
						width: 100%;
						text-align: center;
						.item_box {
							position: absolute;
							left: 50%;
							transform: translateX(-50%);
							-webkit-transform: translateX(-50%);
							transition: .6s top;
							-webkit-transition: .6s top;
							filter: alpha( opacity = 0 );
							opacity: 0;
							h2 {
								font-weight: normal;
								font-size: 20px;
								line-height: 30px;
								font-family: "Microsoft YaHei";
								color: #fff;
							}
							
							p {
								font-weight: normal;
								font-size: 28px;
								font-family: "Microsoft YaHei";
								color: #ffd20d;
							}
							
							&:nth-of-type(1) {
								top: 35.5%;
							}
							
							&:nth-of-type(2) {
								/** top: 526px; */
								// top: 35.5%;
								p {
									line-height: 42px;
								}
							}
							
							&:nth-of-type(3) {
								/** top: 732px; */
								// top: 35.5%;
							}
						}
					}
				}
				/** 第四屏 - 关于我们 end */
				/** 第五屏 - 联系我们 start */
				.fiveScreen {
					.contactUs {
						position: absolute;
						left: 50%;
						top: 50%;
						margin: -75px 0 0 -600px;
						height: 150px;
						padding: 0 100px;
						box-sizing: border-box;
						-webkit-box-sizing: border-box;
						img {
							position: absolute;
							left: 100px;
							top: 100%;
							z-index: 1;
							width: 150px;
							height: 150px;
							filter: alpha( opacity = 100 );
							oacity: 1;
						}
						
						.addr {
							position: absolute;
							left: 300px;
							top: 100%;
							z-index: 1;
							strong {
								position: relative;
								top: -10px;
								font-weight: normal;
								font-size: 28px;
								font-family: "Microsoft YaHei";
								color: #f7b70f;
							}
							
							h1,
							p,
							span {
								font-weight: normal;
								font-size: 20px;
								line-height: 40px;
								font-family: "Microsoft YaHei";
								color: #666;
							}
						}
						
						.qt {
							margin-top: 36px;
							position: absolute;
							right: 96px;
							top: 100%;
							z-index: 1;
							span {
								display: block;
								font-weight: normal;
								font-size: 20px;
								line-height: 40px;
								font-family: "Microsoft YaHei";
								color: #666;
							}
						}
					}
				}
				/** 第五屏 - 联系我们 end */
			}
		}
		/** 核心内容区域 end */
		/** 滚屏的圆点 start */
		.screenCircle {
			position: absolute;
			left: 13px;
			top: 50%;
			z-index: 90;
			margin: -46px 0 0 0;
			a {
				display: block;
				width: 12px;
				height: 12px;
				background-color: #999;
				border-radius: 50%;
				text-indent: -999999em;
				margin-bottom: 10px;
				&.active {
					background-color: #fcda06;
				}
				
				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}
		/** 滚屏的圆点 end */
		/** 右侧下方的内容 start */
		.myFooter {
			position: fixed;
			right: 0;
			bottom: 0;
			z-index: 1002;
			.myFooterBtn {
				a {
					display: block;
					width: 50px;
					height: 50px;
					border-radius: 2px;
					font-weight: normal;
					font-size: 14px;
					line-height: 18px;
					font-family: "Microsoft YaHei";
					color: #fff;
					text-align: center;
					background-color: #fff;
					padding-top: 7px;
					box-sizing: border-box;
					-webkit-box-sizing: border-box;
					position: relative;
					z-index: 100;
					&:first-of-type {
						span {
							position: absolute;
							left: 7px;
							top: 9px;
							z-index: 3;
							width: 35px;
							height: 32px;
							&.active {
								background: url(../images/seek_ico.png) no-repeat 0 -40px;
								background-size: 35px 70px;
							}
							
							&.noActive {
								background-image: transparent;
							}
						}
					}
					
					&:last-of-type {
						span {
							position: absolute;
							left: 7px;
							top: 10px;
							z-index: 3;
							width: 35px;
							height: 30px;
							&.active {
								background: url(../images/seek_ico.png) no-repeat 0 0;
								background-size: 35px 70px;
							}
							
							&.noActive {
								background-image: transparent;
							}
						}
					}
				}
			}
			
			.myCont {
				position: relative;
				.zeek {
					width: 140px;
					height: 167px;
					position: absolute;
					right: 50px;
					/** 0 - -158px */
					bottom: -158px;
					background-color: #face09;
					box-sizing: border-box;
					-webkit-box-sizing: border-box;
					filter: alpha( opacity = 0 );
					opacity: 0;
					img {
						position: absolute;
						left: 20px;
						top: 17px;
						z-index: 10;
						width: 100px;
						height: 100px;
					}
				}
				
				.ky-zeek {
					strong {
						position: absolute;
						/** rgiht: -140px - 50 */
						right: -140px;
						bottom: 0;
						z-index: 2;
						width: 140px;
						height: 50px;
						white-space: normal;
						font-weight: normal;
						font-size: 16px;
						line-height: 50px;
						font-family: "Microsoft YaHei";
						color: #fff;
						background-color: #face09;
						text-align: center;
						filter: alpha( opacity = 0 );
						opacity: 0;
						letter-spacing: 1px;
					}
				}
				
				.phone {
					position: absolute;
					/** -128 - 50 */
					right: -128px;
					bottom: 50px;
					z-index: 9;
					width: 140px;
					padding: 0 0 0 8px;
					box-sizing: border-box;
					-webkit-box-sizing: border-box;
					background-color: #face09;
					filter: alpha( opacity = 0 );
					opacity: 0;
					a {
						white-space: nowrap;
						font-weight: normal;
						font-size: 18px;
						line-height: 50px;
						font-family: "Microsoft YaHei";
						color: #fff;
						
					}
				}
			}
		}
		/** 右侧下方的内容 end */
		/** loading区域 start */
		.myMask {
			width: 100%; 
			height: 100%;
			div {
				position: absolute;
				left: 0;
				z-index: 1002;
				width: 100%;
				height: 50%;
				transition: 1s;
				-webkit-transition: 1s;
				background-color: #f3e0b0;
				&:first-of-type {
					top: 0;
				}
				
				&:last-of-type {
					bottom: 0;
				}
			}
			
		}
		
		.loading {
			/** 通过calc来实现绝对居中 start */
			position: absolute;
			left: calc(50% - 60px);
			top: calc(50% - 70px);
			z-index: 1003;
			/** 通过calc来实现绝对居中 end */
			width: 120px;
			height: 140px;
			.pic {
				width: 120px;
				height: 100px;
				background: url(../images/loading1.png) no-repeat;
				position: relative;
				animation: 1s translateY infinite alternate linear;
				-webkit-animation: 1s translateY infinite alternate linear;
				div {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 991;
					width: 120px;
					height: 100px;
				}
				
				.pic2 {
					background: url(../images/loading2.png) no-repeat;
					animation: 1s rotate1 infinite linear;
					-webkit-animation: 1s rotate1 infinite linear;
				}
				
				.pic3 {
					background: url(../images/loading3.png) no-repeat;
					animation: 1s rotate2 infinite linear;
					-webkit-animation: 1s rotate2 infinite linear;
				}
				
				.text {
					font-weight: normal;
					font-size: 18px;
					line-height: 100px;
					font-family: "Microsoft YaHei";
					color: #f1c70a;
					text-align: center;
				}
			}
			
			.shadow {
				width: 100px;
				height: 40px;
				margin: 0 auto;
				background: radial-gradient( contain, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) );
				background: -webkit-radial-gradient( contain, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) );
				-webkit-transform: scale(.8);
				opacity: .5;
				filter: alpha( opacity = 50 );
				animation: 1s shadow infinite alternate linear;
				-webkit-animation: 1s shadow infinite alternate linear;
				
			}
		}
		
		/** CSS3关键帧 start */
		@-webkit-keyframes rotate1 {
			0% {
				-webkit-transform: rotate(0deg);
			}
			
			100% {
				-webkit-transform: rotate(-360deg);
			}
		}
		
		@keyframes rotate1 {
			0% {
				transform: rotate(0deg);
			}
			
			100% {
				transform: rotate(-360deg);
			}
		}
		
		@-webkit-keyframes rotate2 {
			0% {
				-webkit-transform: rotate(0deg);
			}
			
			100% {
				-webkit-transform: rotate(360deg);
			}
		}
		
		@keyframes rotate2 {
			0% {
				transform: rotate(0deg);
			}
			
			100% {
				transform: rotate(360deg);
			}
		}
		
		@-webkit-keyframes translateY {
			0% {
				-webkit-transform: translateY(0px);
			}
			
			100% {
				-webkit-transform: translateY(7px);
			}
		}
		
		@keyframes translateY {
			0% {
				transform: translateY(0px);
			}
			
			100% {
				transform: translateY(7px);
			}
		}
		
		@-webkit-keyframes shadow {
			0% {
				-webkit-transform: scale(.8);
				filter: alpha( opacity = 50 );
				opacity: .5;
			}
			
			100% {
				-webkit-transform: scale(1);
				filter: alpha( opacity = 100 );
				opacity: 1;
			}
		}
		
		@keyframes shadow {
			0% {
				transform: scale(.8);
				filter: alpha( opacity = 50 );
				opacity: .5;
			}
			
			100% {
				transform: scale(1);
				filter: alpha( opacity = 100 );
				opacity: 1;
			}
		}
		/** CSS3关键帧 end */
		/** loading区域 end */
		/** 箭头 start */
		.myArrow {
			position: absolute;
			left: calc( 50% - 30px );
			bottom: 80px;
			z-index: 9876543;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			background: rgba(0, 0, 0, .5);
			cursor: pointer;
			filter: alpha( opacity = 0 );
			opacity: 0;
			transition: .6s bottom;
			-webkit-transition: .6s bottom;
			a {
				position: absolute;
				left: 15px;
				top: 12px;
				z-index: 9876544;
				display: block;
				width: 30px;
				height: 30px;
				background: url(../images/arrow_ico.png) no-repeat;
				background-size: 30px 30px;
				text-indent: -999999em;
				filter: alpha( opacity = 0 );
				opacity: 0;
				animation: 1s arrowMoveDown infinite;
				-webkit-animation: 1s arrowMoveDown infinite;
			}
		}
		/** 我的关键帧 start */
		@-webkit-keyframes arrowMoveUp {
			0% {
				filter: alpha( opacity = 100 );
				opacity: 1;
				-webkit-transform: translate(0, 0);
			}
			
			100% {
				filter: alpha( opacity = 0 );
				opacity: 0;
				-webkit-transform: translate(0, -8px);
			}
		}
		
		@keyframes arrowMoveUp {
			0% {
				filter: alpha( opacity = 100 );
				opacity: 1;
				transform: translate(0, 0);
			}
			
			100% {
				filter: alpha( opacity = 0 );
				opacity: 0;
				transform: translate(0, -8px);
			}
		}
		
		@-webkit-keyframes arrowMoveDown {
		    0% {
				filter: alpha( opacity = 100 );
		        opacity: 1;
		        -webkit-transform: translate(0, 0);
		    }
		    
		    100% {
				filter: alpha( opacity = 0 );
		        opacity: 0;
		        -webkit-transform: translate(0, 8px);
		    }
		}
		
		@keyframes arrowMoveDown {
		    0% {
		    	filter: alpha( opacity = 100 );
		        opacity: 1;
		        -webkit-transform: translate(0, 0);
		    }
		    
		    100% {
		    	filter: alpha( opacity = 0 );
		        opacity: 0;
		        -webkit-transform: translate(0, 8px);
		    }
		}
		/** 我的关键帧 end */
		/** 箭头 end */
	}
}

@media screen and (min-width: 1921px) {
	body,
	html {
		height: 100%;
		overflow: hidden;
	}
	
	body {
		background-color: #fff;
		font-family: "Microsoft YaHei";
		position: relative;
	}
	
	/** 通用的样式 start */
	.comWidth {
		width: 1200px;
		margin: 0 auto;
	}
	
	/** 头部右上方酷炫的下拉菜单效果 start */
	.T3D {
		-ms-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}
	
	.P800 {
		-ms-perspective: 800px;
		-moz-perspective: 800px;
		-webkit-perspective: 800px;
		-o-perspective: 800px;
		perspective: 800px;
	}
	/** 头部右上方酷炫的下拉菜单效果 end */
	/** 通用的样式 end */
	
	#app {
		height: 100%;
		position: relative;
		z-index: 1;
		/** 头部通用样式 start */
		.commonHeader {
			position: fixed;
			top: 0;
			z-index: 1001;
			width: 100%;
			height: 86px;
			background-color: rgba(0, 0, 0, .5);
			.centerCont {
				/** logo区域 start */
				.logo {
					padding-top: 18px;
					box-sizing: border-box;
					-webkit-box-sizing: border-box;
					h1 {
						a {
							display: block;
							img {
								width: 148px;
								height: 50px;
							}
						}
					}
				}
				/** logo区域 end */
				
				/** 头部导航菜单区域 start */
				.nav {
					position: relative;
					z-index: 2;
					margin-left: 132px;
					ul {
						li {
							float: left;
							height: 86px;
							position: relative;
							z-index: 2;
							letter-spacing: 1px;
							margin: 0 20px;
							a {
								float: left;
								font-weight: normal;
								font-size: 18px;
								line-height: 86px;
								color: #ededed;
								.up {
									position: absolute;
									left: 0;
									top: 0;
									z-index: 2;
									color: #f1c70a;
									width: 0%;
									overflow: hidden;
									transition: .5s width;
									-webkit-transition: .5s width;
									/** 强制文本不换行 start */
									white-space: nowrap;
									/** 强制文本不换行 end */
								}
							}
							
							/** css3的下划线向两边展开的效果 */
							/** &:after {
								content: "";
								width: 0;
								height: 4px;
								background-color: #f1c70a;
								position: absolute;
								top: 95%;
								left: 50%;
								z-index: 2;
								transition: .5s all;
								-webkit-transition: .5s all;
							}
							 
							&.active:after,
							&:hover:after {
								left: 0%;
								width: 100%;
							} */
						}
					}
					
					.line {
						/** 动态设置宽度 start */
						/** width: 20px; */
						/** 动态设置宽度 end */
						height: 4px;
						background-color: #f1c70a;
						position: absolute;
						left: 0;
						bottom: 0;
						z-index: 2;
						transition: .5s left;
						-webkit-transition: .5s left;
					}
				}
				/** 头部导航菜单区域 end */
			}
		}
		/** 头部通用样式 end */
		/** 核心内容区域 start */
		.coreCont {
			width: 100%;
			position: relative;
			overflow: hidden;
			.screList {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 0;
				width: 100%;
				transition: .5s top;
				-webkit-transition: .5s top;
				.commonS {
					width: 100%;
					height: 100%;
					position: relative;
					&:nth-of-type(1) {
						/** 这个是大图的轮播图区域 start */
						/** 这个是大图的轮播图区域 end */
					}
					
					&:nth-of-type(2) {
						background: url(../images/bg_culture.jpg) no-repeat center top;
						background-size: 100% 100%;
						-webkit-background-size: 100% 100%;
					}
					
					&:nth-of-type(3) {
						background: url(../images/bg_pos.jpg) no-repeat center top;
						background-size: 100% 100%;
						-webkit-background-size: 100% 100%;
					}
					
					&:nth-of-type(4) {
						background: url(../images/bg_about.jpg) no-repeat center top;
						background-size: 100% 100%;
						-webkit-background-size: 100% 100%;
					}
					
					&:nth-of-type(5) {
						background: url(../images/bg_contact.jpg) no-repeat center top;
						background-size: 100% 100%;
						-webkit-background-size: 100% 100%;
					}
				}
				
				/** 第一屏 - 首页 start */
				.oneScreen {
					/** 第一屏banner大图 start */
					.myBPic {
						.myBanner {
							ul {
								position: absolute;
								left: 0;
								top: -100px;
								z-index: 2;
								transition: .6s all;
								-webkit-transition: .6s all;
								filter: alpha( opacity = 0 );
								opacity: 0;
								li {
									float: left;
									&:nth-of-type(1) {
										background: url(../images/banner1.jpg) no-repeat center top;
										background-size: 100% 100%;
										-webkit-background-size: 100% 100%;
									}
									
									&:nth-of-type(2) {
										background: url(../images/banner2.jpg) no-repeat center top;
										background-size: 100% 100%;
										-webkit-background-size: 100% 100%;
									}
									
									&:nth-of-type(3) {
										background: url(../images/banner3.jpg) no-repeat center top;
										background-size: 100% 100%;
										-webkit-background-size: 100% 100%;
									}
									
									&:nth-of-type(4) {
										background: url(../images/banner4.jpg) no-repeat center top;
										background-size: 100% 100%;
										-webkit-background-size: 100% 100%;
									}
								}
							}
						}
							
						.myBtn {
							a {
								position: absolute;
								top: 50%;
								z-index: 1009;
								width: 66px;
								height: 66px;
								background-size: 66px 400px;
								text-indent: -999999em;
								filter: alpha( opacity = 0 );
								opacity: 0;
								margin-top: -33px;
								&:nth-of-type(1) {
									left: 33px;
									background: url(../images/icon_ico.png) no-repeat 0 -80px;
								}
								
								&:nth-of-type(1):hover {
									background: url(../images/icon_ico.png) no-repeat 0 -150px;
								}
								
								&:nth-of-type(2) {
									right: 33px;
									background: url(../images/icon_ico.png) no-repeat 0 -10px;
								}
								
								&:nth-of-type(2):hover {
									background: url(../images/icon_ico.png) no-repeat 0 -223px;
								}
							}
						}
						
						/** .mark {
							cursor: pointer;
							div {
								position: absolute;
								left: 0;
								top: 0;
								z-index: 1000;
								width: 50%;
								height: 100%;
								filter: alpha( opacity = 0 );
								opacity: 0;
							}
							.mark_left {
								background-color: #f00;
							}
							
							.mark_right {
								left: 50%;
								background-color: #0000ED;
							}
						} */
						
						.myNav {
							position: absolute;
							left: 50%;
							bottom: 0;
							z-index: 3;
							transform: translateX(-50%);
							-webkit-transform: translateX(-50%);
							filter: alpha( opacity = 0 );
							opacity: 0;
							ul {
								li {
									float: left;
									width: 56px;
									height: 6px;
									background-color: #7d7d7d;
									margin-right: 20px;
									cursor: pointer;
									a {
										float: left;
										width: 0px;
										height: 100%;
										background-color: #f1c70a;
									}
									
									&:last-of-type {
										margin-right: 0;
									}
								}
							}
						}
					}
					/** 第一屏banner大图 end */
				}
				/** 第一屏 - 首页 end */
				/** 第二屏 - 公司文化 start */
				.twoScreen {
					width: 100%;
					overflow: hidden;
					text-align: center;
					.twoCenter {
						.generalizations {
							.title {
								position: absolute;
								left: 50%;
								top: 100%;
								filter: alpha( opacity = 0 );
								opacity: 0;
								transition: .6s top;
								-webkit-transition: .6s top;
								transform: translateX(-50%);
								-webkit-transform: translateX(-50%);
								h1 {
									font-weight: bold;
									font-size: 56px;
									line-height: 88px;
									font-family: "Microsoft YaHei";
									color: #ee881d;
								}
								
								span {
									font-weight: normal;
									font-size: 24px;
									font-family: "Microsoft YaHei";
									color: #868686;
								}
							}
							
							.introduction {
								padding: 0 40px;
								box-sizing: border-box;
								-webkit-box-sizing: border-box;
								p {
									width: 1120px;
									position: absolute;
									top: -100%;
									filter: alpha( opacity = 0 );
									opacity: 0;
									transition: .6s top;
									-webkit-transition: .6s top;
									font-weight: normal;
									font-size: 24px;
									line-height: 40px;
									font-family: "Microsoft YaHei";
									color: #000;
								}
							}
							
							.concept {
								width: 100%;
								text-align: left;
								position: relative;
								.commonShow {
									&:first-of-type {
										h2 {
											position: absolute;
											left: 100%;
											top: 400px;
											filter: alpha( opacity = 0 );
											opacity: 0;
											transition: .6s left;
											-webkit-transition: .6s left;
										}
										
										p {
											position: absolute;
											left: -100%;
											top: 450px;
											width: 800px;
											filter: alpha( opacity = 100 );
											opacity: 100;
											transition: .6s left;
											-webkit-transition: .6s left;
										}
									}
									
									&:last-of-type {
										h2 {
											position: absolute;
											left: -100%;
											top: 520px;
											filter: alpha( opacity = 0 );
											opacity: 0;
											transition: .6s left;
											-webkit-transition: .6s left;
										}
										
										p {
											position: absolute;
											left: 400px;
											top: 570px;
											width: 800px;
											filter: alpha( opacity = 0 );
											opacity: 0;
											transition: .6s left;
											-webkit-transition: .6s left;
										}
									}
									
									h2 {
										font-weight: normal;
										font-size: 30px;
										line-height: 50px;
										font-family: "Microsoft YaHei";
										color: #ef881d;
									}
									
									p {
										font-weight: normal;
										font-size: 20px;
										line-height: 30px;
										font-family: "Microsoft YaHei";
										color: #000;
									}
								}
							}
						}
					}
				}
				/** 第二屏 - 公司文化 end */
				/** 第三屏 - 求职招聘 start */
				.threeScreen {
					width: 100%;
					overflow: hidden;
					zoom: 1;
					.threeCenter {
						position: absolute;
						left: 50%;
						top: -100%;
						z-index: 1;
						width: 1000px;
						height: 560px;
						background-color: rgba(0, 0, 0, .8);
						border-radius: 10px;
						margin: 0 auto;
						transition: .6s all;
						-webkit-transition: .6s all;
						filter: alpha( opacity = 0 );
						opacity: 0;
						transform: translateX(-50%);
						-webkit-transform: translateX(-50%);
						.joinUs {
							height: 560px;
							padding: 47px 15px;
							box-sizing: border-box;
							-webkit-box-sizing: border-box;
							position: relative;
							overflow: hidden;
							.myPosBtn {
								position: absolute;
								left: 100%;
								top: 47px;
								z-index: 3;
								float: left;
								width: 150px;
								height: 466px;
								margin-right: 15px;
								transition: .6s left;
								-webkit-transition: .6s left;
								filter: alpha( opacity = 0 );
								opacity: 0;
								a {
									display: block;
									width: 130px;
									height: 40px;
									border-radius: 30px;
									font-weight: normal;
									font-size: 18px;
									line-height: 40px;
									font-family: "Microsoft YaHei";
									color: #fff;
									text-align: center;
									position: relative;
									z-index: 2;
									&:last-of-type {
										top: 20px;
									}
								}
								
								span {
									position: absolute;
									left: 0;
									top: 0;
									z-index: 1;
									display: block;
									width: 130px;
									height: 40px;
									text-indent: -999999em;
									background-color: #595a5c;
									border-radius: 30px;
									&::after {
										content: '';
										position: absolute;
										right: -26px;
										top: 14px;
										width: 13px;
										height: 13px;
										border-radius: 50%;
										background-color: #fff;
									}
								}
							}
							
							.dividingLine {
								float: left;
								position: absolute;
								left: 164px;
								top: 100%;
								z-index: 2;
								width: 1px;
								height: 466px;
								background: url(../images/line.png) no-repeat right center;
								background-size: 1px 466px;
								text-indent: -999999em;
								filter: alpha( opacity = 0 );
								opacity: 0;
								transition: .6s top;
								-webkit-transition: .6s top;
							}
							
							.myPosCont {
								position: absolute;
								left: -100%;
								z-index: 3;
								float: left;
								width: 802px;
								filter: alpha( opacity = 0 );
								opacity: 0;
								transition: .6s left;
								-webkit-transition: .6s left;
								.commonC {
									display: none;
									position: relative;
									z-index: 2;
									filter: alpha( opacity = 0 );
									opacity: 0;
									/** 自定义滚动条 start */
									#scrollBar {
										position: absolute;
										right: -18px;
										top: 0;
										z-index: 22;
										width: 8px;
										height: 100%;
										border-radius: 6px;
										background-color: transparent;
										#bar {
											position: absolute;
											top: 0;
											left: 0;
											z-index: 3;
											width: 8px;
											height: 72px;
											border-radius: 6px;
											background-color: #fff;
											cursor: pointer;
										}
									}
									/** 自定义滚动条 end */
									.comPCont {
										height: 466px;
										overflow: hidden;
										position: relative;
										.companyPos {
											position: absolute;
											left: 0;
											top: -2px;
											z-index: 1;
											width: 802px;
											> li {
												margin-bottom: 10px;
												padding: 0 20px;
												box-sizing: border-box;
												-webkit-box-sizing: border-box;
												h1 {
													font-weight: normal;
													font-size: 20px;
													font-family: "Microsoft YaHei";
													color: #f1c70a;
													margin-bottom: 8px;
												}
												
												.myPosDesc {
													width: 936px;
													.item {
														float: left;
														margin-right: 170px;
														label,
														strong {
															font-weight: normal;
															font-size: 16px;
															line-height: 30px;
															font-family: "Microsoft YaHei";
															color: #fff;
														}
														
														&:nth-of-type(4) {
															margin-right: 186px;
														}
													}
												}
												/** a {
													padding: 0 22px 0 0;
													box-sizing: border-box;
													-webkit-box-sizing: border-box;
													font-weight: normal;
													font-size: 16px;
													line-height: 36px;
													color: #f1c70a;
													font-family: "Microsoft YaHei";
													width: 16px;
													height: 8px;
													background: url(../images/arrow_down.png) no-repeat right center;
													background-size: 16px 8px;
													
													&.up {
														background-image: url(../images/arrow_up.png);
														background-size: 16px 8px;
													}
												} */
												
												.jobRequirements {
													h2 {
														font-weight: normal;
														font-size: 18px;
														line-height: 32px;
														font-family: "Microsoft YaHei";
														color: #fff;
													}
													
													ul {
														li {
															font-weight: normal;
															font-size: 16px;
															line-height: 30px;
															font-family: "Microsoft YaHei";
															color: #fff;
														}
													}
												}
												/** 局部样式调整 start */
												&:nth-of-type(5) {
													.myPosDesc {
														.item:nth-of-type(2) {
															margin-right: 162px;
														}
														
														.item:nth-of-type(4) {
															margin-right: 154px;
														}
													}
												}
												
												&:nth-of-type(1) {
													padding-top: 0;
												}
												/** 局部样式调整 end */
											}
										}
									}
								}
								/** 求职招聘分页器版块 start */
								/** .page {
									position: absolute;
									left: 50%;
									bottom: -48px;
									z-index: 99;
									text-align: center;
									width: 100%;
									transform: translateX(-50%);
									-webkit-transform: translateX(-50%);
									a {
										display: inline-block;
										width: 32px;
										height: 32px;
										background-color: #a09fa0;
										border-radius: 50%;
										font-weight: normal;
										font-size: 16px;
										line-height: 32px;
										color: #000;
										margin-right: 15px;
										&:last-of-type {
											margin-right: 0;
										}
										
										&.active {
											background-color: #e7bf0b;
											color: #fff;
										}
									}
								} */
								/** 求职招聘分页器版块 end */
								.companyDesc {
									padding: 0 0 0 10px;
									box-sizing: border-box;
									-webkit-box-sizing: border-box;
									h1 {
										font-weight: normal;
										font-size: 24px;
										line-height: 32px;
										font-family: "Microsoft YaHei";
										color: #fff;
									}
									h2 {
										font-weight: normal;
										font-size: 20px;
										line-height: 40px;
										font-family: "Microsoft YaHei";
										color: #fff;
									}
									
									.welfare {
										ul {
											li {
												font-weight: normal;
												font-size: 16px;
												line-height: 30px;
												font-family: "Microsoft YaHei";
												color: #fff;
											}
										}
									}
									
									.address {
										margin-top: 30px;
										ol {
											li {
												font-weight: normal;
												font-size: 16px;
												line-height: 30px;
												font-family: "Microsoft YaHei";
												color: #fff;
											}
										}
									}
								}
							}
						}
					}
				}
				/** 第三屏 - 求职招聘 end */
				/** 第四屏 - 关于我们 start */
				.fourScreen {
					.item {
						width: 100%;
						text-align: center;
						.item_box {
							position: absolute;
							left: 50%;
							transform: translateX(-50%);
							-webkit-transform: translateX(-50%);
							transition: .6s top;
							-webkit-transition: .6s top;
							filter: alpha( opacity = 0 );
							opacity: 0;
							h2 {
								font-weight: normal;
								font-size: 20px;
								line-height: 30px;
								font-family: "Microsoft YaHei";
								color: #fff;
							}
							
							p {
								font-weight: normal;
								font-size: 28px;
								font-family: "Microsoft YaHei";
								color: #ffd20d;
							}
							
							&:nth-of-type(1) {
								top: 37.5%;
							}
							
							&:nth-of-type(2) {
								top: 37.5%;
								p {
									line-height: 42px;
								}
							}
							
							&:nth-of-type(3) {
								top: 37.5%;
							}
						}
					}
				}
				/** 第四屏 - 关于我们 end */
				/** 第五屏 - 联系我们 start */
				.fiveScreen {
					.contactUs {
						position: absolute;
						left: 50%;
						top: 50%;
						margin: -75px 0 0 -600px;
						height: 150px;
						padding: 0 100px;
						box-sizing: border-box;
						-webkit-box-sizing: border-box;
						img {
							position: absolute;
							left: 100px;
							top: 100%;
							z-index: 1;
							width: 150px;
							height: 150px;
							filter: alpha( opacity = 100 );
							oacity: 1;
						}
						
						.addr {
							position: absolute;
							left: 300px;
							top: 100%;
							z-index: 1;
							strong {
								position: relative;
								top: -10px;
								font-weight: normal;
								font-size: 28px;
								font-family: "Microsoft YaHei";
								color: #f7b70f;
							}
							
							h1,
							p,
							span {
								font-weight: normal;
								font-size: 20px;
								line-height: 40px;
								font-family: "Microsoft YaHei";
								color: #666;
							}
						}
						
						.qt {
							margin-top: 36px;
							position: absolute;
							right: 96px;
							top: 100%;
							z-index: 1;
							span {
								display: block;
								font-weight: normal;
								font-size: 20px;
								line-height: 40px;
								font-family: "Microsoft YaHei";
								color: #666;
							}
						}
					}
				}
				/** 第五屏 - 联系我们 end */
			}
		}
		/** 核心内容区域 end */
		/** 滚屏的圆点 start */
		.screenCircle {
			position: absolute;
			left: 13px;
			top: 50%;
			z-index: 90;
			margin: -46px 0 0 0;
			a {
				display: block;
				width: 12px;
				height: 12px;
				background-color: #999;
				border-radius: 50%;
				text-indent: -999999em;
				margin-bottom: 10px;
				&.active {
					background-color: #fcda06;
				}
				
				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}
		/** 滚屏的圆点 end */
		/** 右侧下方的内容 start */
		.myFooter {
			position: fixed;
			right: 0;
			bottom: 0;
			z-index: 1002;
			.myFooterBtn {
				a {
					display: block;
					width: 50px;
					height: 50px;
					border-radius: 2px;
					font-weight: normal;
					font-size: 14px;
					line-height: 18px;
					font-family: "Microsoft YaHei";
					color: #fff;
					text-align: center;
					background-color: #fff;
					padding-top: 7px;
					box-sizing: border-box;
					-webkit-box-sizing: border-box;
					position: relative;
					z-index: 100;
					&:first-of-type {
						span {
							position: absolute;
							left: 7px;
							top: 9px;
							z-index: 3;
							width: 35px;
							height: 32px;
							&.active {
								background: url(../images/seek_ico.png) no-repeat 0 -40px;
								background-size: 35px 70px;
							}
							
							&.noActive {
								background-image: transparent;
							}
						}
					}
					
					&:last-of-type {
						span {
							position: absolute;
							left: 7px;
							top: 10px;
							z-index: 3;
							width: 35px;
							height: 30px;
							&.active {
								background: url(../images/seek_ico.png) no-repeat 0 0;
								background-size: 35px 70px;
							}
							
							&.noActive {
								background-image: transparent;
							}
						}
					}
				}
			}
			
			.myCont {
				position: relative;
				.zeek {
					width: 140px;
					height: 167px;
					position: absolute;
					right: 50px;
					/** 0 - -158px */
					bottom: -158px;
					background-color: #face09;
					box-sizing: border-box;
					-webkit-box-sizing: border-box;
					filter: alpha( opacity = 0 );
					opacity: 0;
					img {
						position: absolute;
						left: 20px;
						top: 17px;
						z-index: 10;
						width: 100px;
						height: 100px;
					}
				}
				
				.ky-zeek {
					strong {
						position: absolute;
						/** rgiht: -140px - 50 */
						right: -140px;
						bottom: 0;
						z-index: 2;
						width: 140px;
						height: 50px;
						white-space: normal;
						font-weight: normal;
						font-size: 16px;
						line-height: 50px;
						font-family: "Microsoft YaHei";
						color: #fff;
						background-color: #face09;
						text-align: center;
						filter: alpha( opacity = 0 );
						opacity: 0;
						letter-spacing: 1px;
					}
				}
				
				.phone {
					position: absolute;
					/** -128 - 50 */
					right: -128px;
					bottom: 50px;
					z-index: 9;
					width: 140px;
					padding: 0 0 0 8px;
					box-sizing: border-box;
					-webkit-box-sizing: border-box;
					background-color: #face09;
					filter: alpha( opacity = 0 );
					opacity: 0;
					a {
						white-space: nowrap;
						font-weight: normal;
						font-size: 18px;
						line-height: 50px;
						font-family: "Microsoft YaHei";
						color: #fff;
						
					}
				}
			}
		}
		/** 右侧下方的内容 end */
		/** loading区域 start */
		.myMask {
			width: 100%; 
			height: 100%;
			div {
				position: absolute;
				left: 0;
				z-index: 1002;
				width: 100%;
				height: 50%;
				transition: 1s;
				-webkit-transition: 1s;
				background-color: #f3e0b0;
				&:first-of-type {
					top: 0;
				}
				
				&:last-of-type {
					bottom: 0;
				}
			}
			
		}
		
		.loading {
			/** 通过calc来实现绝对居中 start */
			position: absolute;
			left: calc(50% - 60px);
			top: calc(50% - 70px);
			z-index: 1003;
			/** 通过calc来实现绝对居中 end */
			width: 120px;
			height: 140px;
			.pic {
				width: 120px;
				height: 100px;
				background: url(../images/loading1.png) no-repeat;
				position: relative;
				animation: 1s translateY infinite alternate linear;
				-webkit-animation: 1s translateY infinite alternate linear;
				div {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 991;
					width: 120px;
					height: 100px;
				}
				
				.pic2 {
					background: url(../images/loading2.png) no-repeat;
					animation: 1s rotate1 infinite linear;
					-webkit-animation: 1s rotate1 infinite linear;
				}
				
				.pic3 {
					background: url(../images/loading3.png) no-repeat;
					animation: 1s rotate2 infinite linear;
					-webkit-animation: 1s rotate2 infinite linear;
				}
				
				.text {
					font-weight: normal;
					font-size: 18px;
					line-height: 100px;
					font-family: "Microsoft YaHei";
					color: #f1c70a;
					text-align: center;
				}
			}
			
			.shadow {
				width: 100px;
				height: 40px;
				margin: 0 auto;
				background: radial-gradient( contain, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) );
				background: -webkit-radial-gradient( contain, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) );
				-webkit-transform: scale(.8);
				opacity: .5;
				filter: alpha( opacity = 50 );
				animation: 1s shadow infinite alternate linear;
				-webkit-animation: 1s shadow infinite alternate linear;
				
			}
		}
		
		/** CSS3关键帧 start */
		@-webkit-keyframes rotate1 {
			0% {
				-webkit-transform: rotate(0deg);
			}
			
			100% {
				-webkit-transform: rotate(-360deg);
			}
		}
		
		@keyframes rotate1 {
			0% {
				transform: rotate(0deg);
			}
			
			100% {
				transform: rotate(-360deg);
			}
		}
		
		@-webkit-keyframes rotate2 {
			0% {
				-webkit-transform: rotate(0deg);
			}
			
			100% {
				-webkit-transform: rotate(360deg);
			}
		}
		
		@keyframes rotate2 {
			0% {
				transform: rotate(0deg);
			}
			
			100% {
				transform: rotate(360deg);
			}
		}
		
		@-webkit-keyframes translateY {
			0% {
				-webkit-transform: translateY(0px);
			}
			
			100% {
				-webkit-transform: translateY(7px);
			}
		}
		
		@keyframes translateY {
			0% {
				transform: translateY(0px);
			}
			
			100% {
				transform: translateY(7px);
			}
		}
		
		@-webkit-keyframes shadow {
			0% {
				-webkit-transform: scale(.8);
				filter: alpha( opacity = 50 );
				opacity: .5;
			}
			
			100% {
				-webkit-transform: scale(1);
				filter: alpha( opacity = 100 );
				opacity: 1;
			}
		}
		
		@keyframes shadow {
			0% {
				transform: scale(.8);
				filter: alpha( opacity = 50 );
				opacity: .5;
			}
			
			100% {
				transform: scale(1);
				filter: alpha( opacity = 100 );
				opacity: 1;
			}
		}
		/** CSS3关键帧 end */
		/** loading区域 end */
		/** 箭头 start */
		.myArrow {
			position: absolute;
			left: calc( 50% - 30px );
			bottom: 80px;
			z-index: 9876543;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			background: rgba(0, 0, 0, .5);
			cursor: pointer;
			filter: alpha( opacity = 0 );
			opacity: 0;
			transition: .6s bottom;
			-webkit-transition: .6s bottom;
			a {
				position: absolute;
				left: 15px;
				top: 12px;
				z-index: 9876544;
				display: block;
				width: 30px;
				height: 30px;
				background: url(../images/arrow_ico.png) no-repeat;
				background-size: 30px 30px;
				text-indent: -999999em;
				filter: alpha( opacity = 0 );
				opacity: 0;
				animation: 1s arrowMoveDown infinite;
				-webkit-animation: 1s arrowMoveDown infinite;
			}
		}
		/** 我的关键帧 start */
		@-webkit-keyframes arrowMoveUp {
			0% {
				filter: alpha( opacity = 100 );
				opacity: 1;
				-webkit-transform: translate(0, 0);
			}
			
			100% {
				filter: alpha( opacity = 0 );
				opacity: 0;
				-webkit-transform: translate(0, -8px);
			}
		}
		
		@keyframes arrowMoveUp {
			0% {
				filter: alpha( opacity = 100 );
				opacity: 1;
				transform: translate(0, 0);
			}
			
			100% {
				filter: alpha( opacity = 0 );
				opacity: 0;
				transform: translate(0, -8px);
			}
		}
		
		@-webkit-keyframes arrowMoveDown {
		    0% {
				filter: alpha( opacity = 100 );
		        opacity: 1;
		        -webkit-transform: translate(0, 0);
		    }
		    
		    100% {
				filter: alpha( opacity = 0 );
		        opacity: 0;
		        -webkit-transform: translate(0, 8px);
		    }
		}
		
		@keyframes arrowMoveDown {
		    0% {
		    	filter: alpha( opacity = 100 );
		        opacity: 1;
		        -webkit-transform: translate(0, 0);
		    }
		    
		    100% {
		    	filter: alpha( opacity = 0 );
		        opacity: 0;
		        -webkit-transform: translate(0, 8px);
		    }
		}
		/** 我的关键帧 end */
		/** 箭头 end */
	}
}




